<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>支付订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/flatpickr.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/rechargeCoinRes/css/amazeui.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/rechargeCoinRes/css/main.css}" />
</head>
<body>
<div class="wrapper">
    <div th:include="main/simpleHeader :: header"></div>
</div>
<div class="pay">
    <!--主内容开始编辑-->
    <div class="tr_recharge" style="height: ">
        <div class="tr_rechtext">
            <p class="te_retit"><img th:src="@{/rechargeCoinRes/images/coin.png}" alt="" />充值中心</p>
            <p>1.硬币是DStation推出的虚拟货币，你可以使用硬币来支持喜欢的视频。</p>
            <p>2.硬币与人民币换算为10:1，即1元=10硬币，你可以选择使用支付宝充值，硬币个数必须是10的整数倍。</p>
        </div>
        <form action="" class="am-form" id="doc-vld-msg">
            <div class="tr_rechbox">
                <div class="tr_rechhead">
                    <img th:src="@{/images/userIcon/{userIc}(userIc=${session.userInfo.userIcon})}" />
                    <p>充值帐号：
                        <a th:utext="${session.userInfo.userName}">王凯</a>
                    </p>
                    <div class="tr_rechheadcion">
                        <img th:src="@{/rechargeCoinRes/images/coin.png}" alt="" />
                        <span>当前余额：<span th:text="${session.userInfo.userBalance} + 硬币">0硬币</span></span>
                    </div>
                </div>
                <div class="tr_rechli am-form-group">
                    <ul class="ui-choose am-form-group" id="uc_01">
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio"  value="10" name="docVlGender" required data-validation-message="请选择一项充值额度"> 10￥
                            </label>
                        </li>
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" value="20" name="docVlGender" data-validation-message="请选择一项充值额度"> 20￥
                            </label>
                        </li>

                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" value="50" name="docVlGender" data-validation-message="请选择一项充值额度"> 50￥
                            </label>
                        </li>
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 其他金额
                            </label>
                        </li>
                    </ul>
                    <!--<span>1招兵币=1元 10元起充</span>-->
                </div>
                <div class="tr_rechoth am-form-group">
                    <span>其他金额：</span>
                    <input type="number" min="10" max="10000" value="10.00元" class="othbox" data-validation-message="充值金额范围：10-10000元" />
                    <!--<p>充值金额范围：10-10000元</p>-->
                </div>
                <div class="tr_rechcho am-form-group">
                    <span>充值方式：</span>
                    <label class="am-radio" style="margin-right:30px;">
                        <input type="radio" name="radio1" value="" data-am-ucheck data-validation-message="请选择一种充值方式"><img th:src="@{/rechargeCoinRes/images/zfbpay.png}"/>
                    </label>
                </div>
                <div class="tr_rechnum">
                    <span>应付金额：</span>
                    <p class="rechnum" th:text="${total}">0.00</p>
                </div>
                <div class="btn-sbmit">
                    <button type="button" id="submitVideoInfo">充值</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" th:src="@{/pagesResource/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/rechargeCoinRes/js/amazeui.min.js}"></script>
<script type="text/javascript" th:src="@{/rechargeCoinRes/js/ui-choose.js}"></script>
<script src="/js/sweetAlert.js"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script type="text/javascript">
    // 将所有.ui-choose实例化
    $('.ui-choose').ui_choose();
    // uc_01 ul 单选
    var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
    uc_01.click = function(index, item) {
        console.log('click', index, item.text())
    }
    uc_01.change = function(index, item) {
        console.log('change', index, item.text())
    }
    $(function() {
        $('#uc_01 li:eq(3)').click(function() {
            $('.tr_rechoth').show();
            $('.tr_rechoth').find("input").attr('required', 'true')
            $('.rechnum').text('10.00');
        })
        $('#uc_01 li:eq(0)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('10.00');
            $('.othbox').val('');
        })
        $('#uc_01 li:eq(1)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('20.00');
            $('.othbox').val('');
        })
        $('#uc_01 li:eq(2)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('50.00');
            $('.othbox').val('');
        })
        $(document).ready(function() {
            $('.othbox').on('input propertychange', function() {
                var num = $(this).val();
                $('.rechnum').html(num + ".00");
            });
        });
    })

    $(function() {
        $('#doc-vld-msg').validator({
            onValid: function(validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            onInValid: function(validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                if(!$alert.length) {
                    $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                    appendTo($group);
                }
                $alert.html(msg).show();
            }
        });
    });
</script>

<script>
    /**
     * 点击充值按钮
     */
    $("#submitVideoInfo").click(
        function () {
            var money = $('.rechnum').text();  //支付的钱
            if(money == "" || money == null) {
                swal("Warning", "请输入充值金额！", "warning");
                return;
            }
            //1. AliPay需要的参数
            var WIDout_trade_no = Date.now();   //根据系统时间获得一个随机数 作为订单号
            var WIDsubject = "购买硬币";    //购买的东西
            var WIDtotal_amount = money;
            var WIDbody = "购买硬币";
            params = {
                'WIDout_trade_no':WIDout_trade_no,
                'WIDsubject':WIDsubject,
                'WIDtotal_amount':WIDtotal_amount,
                'WIDbody':WIDbody,
            };
            Post("/aliPay/payPage",params);
        }
    );

    /*
     *   功能： 模拟form表单的提交
     *   参数： URL 跳转地址 PARAMTERS 参数
    */
    function Post(URL, PARAMTERS) {
        //创建form表单
        var temp_form = document.createElement("form");
        temp_form.action = URL;
        //如需打开新窗口，form的target属性要设置为'_blank'
        temp_form.target = "_self";
        temp_form.method = "post";
        temp_form.style.display = "none";
        //添加参数
        for (var item in PARAMTERS) {
            var opt = document.createElement("textarea");
            opt.name = item;
            opt.value = PARAMTERS[item];
            temp_form.appendChild(opt);
        }
        document.body.appendChild(temp_form);
        //提交数据
        temp_form.submit();
    }

    /**
     * 个人主页
     * @param userId
     */
    function userMainPage(userId) {
        window.location.href = "/user/userMainPage?userId=" + userId;
    }
</script>
</body>

</html>